<template>
    <el-card class="box-card scroll-item" v-scroll-reveal.reset shadow="always">
        <div slot="header" class="d-flex align-items-center">
           <i class="iconfont icon-tags"></i>
            <span>标签云</span>
            <!-- <el-button class="ml-auto" style="float: right; padding: 3px 0" type="text">
                <a @click="moreTags" class="me-pull-right me-tag-more">查看全部</a>
            </el-button> -->
        </div>
        <div class="text item">
            <!-- <el-tag type="success" v-for="t in tags" :key="t.id" size="small" class="tag-item" @click="tag(t.id)">{{t.name}}</el-tag> -->
            <tag-cloud :data="tags" @clickTag="clickTagItem"></tag-cloud>
        </div>
    </el-card>
</template>

<script>
import tagCloud from "@/components/TagCloud";
export default {
    name: 'Tags',
    props: {
        tags: {
            type: Array,
            required: true
        }
    },
    components: {
        tagCloud
    },
    data () {
        return {
            types:['', 'success', 'info', 'warning', 'danger'],
        }
    },
    methods: {
        moreTags() {
            this.$router.push('/tag/all')
        },
        tag(id) {
            this.$router.push({path: `/tag/${id}`})
        },
        clickTagItem (tag) {
            //console.log(tag)
            this.$router.push({path: `/tag/${tag.id}`})
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.el-card
    i
        font-size 20px
        color #437dff
        font-weight bold
    span
        font-weight bold
    .tag-item
        cursor pointer
        margin 4px 5px
        font-weight 500 
</style>
